<#import "spring.ftl" as spring />
<#import "inspector-time-macros.ftl" as imacro />
<html>
<head>
	<title>my.edificetraining.com: Schedule your inspection</title>
</head>
<body>

<script src="${springMacroRequestContext.contextPath}/js/prototype.js" type="text/javascript"></script>
<script src="${springMacroRequestContext.contextPath}/js/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script>
//Builds out the list of realtors for the autocomplete textfield
var realtorsList = [
  <#list referringRealtors as realtor>
    '${realtor.name.last}, ${realtor.name.first}<#if realtor.company??> - ${realtor.company!}</#if>'<#if realtor_has_next>,</#if>
  </#list>
];
</script>


<#include "schedulebreadcrumb.ftl">

<div id="content">

	<@imacro.listErrors "criteria" />
	
	<div id="infoBox">
		<table>
		<tr>
			<td><b>Home Inspector:</b></td>
			<td>${criteria.inspection.inspector.name} of ${criteria.inspection.inspector.company.name}</td>
		</tr>	
		<tr>
			<td><b>Property Address:</b></td>
			<td>${criteria.inspection.property.location.street1}, ${criteria.inspection.property.location.city}</td>
		</tr>
		<tr>
			<td><b>Time of Inspection:</b></td>
			<td>${criteria.inspection.inspectionTime?date} at ${criteria.inspection.inspectionTime?time?string.short}</td>
		</tr>
		<tr>
			<td><b>Inspection Fee:</b></td>
			<td>$${criteria.inspection.inspectionFee}</td>
		</tr>
		</table>	
	</div>

	<form name="scheduleForm"  method="POST">
		<@spring.formHiddenInput "criteria.inspection.inspectionTime"/>
		<input type="hidden" name="inspectorId" value="${criteria.inspection.inspector.id}" />
		
		<#if inspectorCompany.optionalServices?? && (inspectorCompany.optionalServices?size > 0)>
		
			<h2>ADDITIONAL SERVICES</h2>	
			
			<p>The following additional services are offered by your Inspector.  Please select any that you would like
	   		   to have included with your inspection.  Please note that these services will affect your final price quote.</p>
			
			<table>
				<@spring.bind "criteria.inspection.optionalServices" />
				<#list inspectorCompany.optionalServices as availableService>
					<tr>
						<td>
							<input type="checkbox" 
							<#if criteria.inspection.optionalServiceIds?seq_contains(availableService.id)>
								checked="checked" 
							</#if>			
							name="optionalService.id.${availableService_index}" class="checkbox">
						</td>
						<td>${availableService.title} ($${availableService.price}): <i>${availableService.description}</i></td>
					</tr>
				</#list>
			</table>
			
			<hr/>		
				
		</#if>

		<h2>REAL ESTATE AGENT REFERRAL</h2>
		
		<p>Most home buyers are referred to us by a Real Estate Agent or a friend.  Please complete this section so that we know who to thank!</p>
		
		<p><input type="radio" name="referringRealtorInputType" value="noRef" <#if criteria.referringRealtorInputType! == "noRef">checked</#if> class="radio">
				I'm not working with a realtor.</p>
		
		<input type="radio" name="referringRealtorInputType" value="listSelection"<#if criteria.referringRealtorInputType! == "listSelection">checked</#if> class="radio">
		I have selected my referring realtor in this list (just begin typing the real estate agent's name and we'll find it):&nbsp;
		
		<div style="margin-left: 20px; margin-top: 5px;">
			<script language="javascript">
				//Written in javascript so it won't show up on non-javascript enabled clients (like a Blackberry)
				document.write('<input id="referringAgentSelection" name="selectedRealtor" autocomplete="off" type="text" value="${criteria.selectedRealtor!}" size="30" />');
				document.write('<div class="autocomplete" id="realtorsDropDown" style="display:none"></div>');
				
				new Autocompleter.Local('referringAgentSelection', 'realtorsDropDown', realtorsList, {frequency:0.1});
			</script>
			
			<noscript>
				<!-- for Blackberrys, etc -->
				<select id="referringAgentId" name="referringAgentId">
					<option value="">-- Select Agent --</option>
					    <#list referringRealtors as realtor>
							<option value="${realtor.id}">${realtor.name.first} ${realtor.name.last} - ${realtor.company}</option>
					    </#list>
				</select>	
			</noscript>
		</div>
		
		
		<br style="clear:both" />
		
		<p><input type="radio" name="referringRealtorInputType" value="enteredDetails"<#if criteria.referringRealtorInputType! == "enteredDetails">checked</#if> class="radio">
			My realtors name and contact details are provided below:</p>
			
			<table class="formTable">
				<tr>
					<th>First Name</th>
					<td><@spring.formInput "criteria.referringRealEstateAgent.name.first", 'size="25", maxlength="50"' /></td>
				</tr>
				<tr>
					<th>Last Name</th>
					<td><@spring.formInput "criteria.referringRealEstateAgent.name.last", 'size="25", maxlength="50"' /></td>
				</tr>
				<tr>
					<th>Company</th>
					<td><@spring.formInput "criteria.referringRealEstateAgent.company", 'size="25"' /></td>
				</tr>
				<tr>
					<th>Phone</th>
					<td><@spring.formInput "criteria.referringRealEstateAgent.cellPhone", 'size="25"' /></td>
				</tr>
				<tr>
					<th>Email</th>
					<td><@spring.formInput "criteria.referringRealEstateAgent.email", 'size="25"' /></td>
				</tr>
			</table>

		
		<hr/>
		
		<h2>SPECIAL INSTRUCTIONS</h2>
		
		<p>Please include any additional information below that will help your inspector to better serve your needs.</p>
		
		<table class="formTable">
			<tr>
				<th>Comments</th>
				<td><@spring.formTextarea "criteria.inspection.comments", 'rows="5" cols="30"'/></td>
			</tr>
		</table>
		

		
		<div class="bottomNavLayout">
			<a href="schedule2-rt.html" class="navBack">BACK</a>
			<input type="submit" value="CONTINUE" class="navFwd" />
		</div>
		
		<br style="clear:both" />
		
		<div class="requiredText">*INDICATES REQUIRED FIELDS</div>
	
	</form>
</div>
</body>
</html>